<template>
  <div id="piaoPost">
    <div class="container">
      <form action>
        <div class="post_user">
          <span class="pu_img">
            <img :src="'/api/upload/'+getUser[0].userImg" alt />
          </span>
          <span>{{getUser[0].userName}}</span>
        </div>
        <div class="post_p">
          <!-- <input type="text" name="user" v-model="userId" /> -->
          <textarea class="comm-txt2" maxlength="50" id v-model="textarea" placeholder="分享你的心情吧！"></textarea>
          <input
            type="file"
            name="fileName"
            id
            ref="uploadImg1"
            @change="uploadImg"
            placeholder="11"
          />
          <img :src="imgpath" alt @click="achieve" style="width:100px;" ref="im" />
          <div>
            <button @click.prevent="uploadInfo" class="comm-btn2" >塞进瓶子</button>
            <button @click="closeDiv" class="comm-btn2">取消</button>
          </div>
        </div>
      </form>
    </div>
  </div>
</template>
<script>
export default {
  name: "piaoPost",
  data() {
    return {
      imgpath: "1.jpg",
      file: null,
      textarea: "",
      getUser: [],
      userId: 0,
      nowDate: ""
    };
  },
  created() {
    this.$axios.defaults.headers.common["Authorization"] = localStorage.getItem(
      "MyToken"
    );
    this.$axios
      .get("/api/users/getUserInfo")
      .then(res => {
        this.getUser = res.data.data;
        console.log("用户信息", this.getUser);
        this.userId = this.getUser[0].userId;
      })
      .catch(err => {
        console.log(err);
      });
  },
  methods: {
    // 关闭扔瓶子
    closeDiv() {
      this.$refs.sendbottle.style.display = "none";
    },
    achieve() {
      this.$refs.uploadImg1.click();
    },
    uploadImg($event) {
      this.file = $event.target.files[0];
      var fileReader1 = new FileReader();
      var reg = /^image/gi;
      var _this = this;
      var flag = reg.test(this.$refs.uploadImg1.files[0].type);
      if (flag) {
        fileReader1.onload = function(e) {
          _this.$refs.im.src = e.target.result;
        };
        fileReader1.readAsDataURL(this.$refs.uploadImg1.files[0]);
      } else {
        // alert("图片上传失败！");
        this.fail()
        this.$router.push('/piao')
      }
    },
    uploadInfo() {
      let formInfo = new FormData();
      formInfo.append("fileName", this.file);
      formInfo.append("textarea", this.textarea);
      formInfo.append("userId", this.userId);
      console.log("表单", this.file);
      this.$axios
        .post("/api/bottle/upload", formInfo)
        .then(res => {
          console.log("上传结果", res.data.data);
          
          if (res.data.data.length != 0) {
            // alert("上传成功");
            this.success()
            this.$router.push('/piao')
          }
        })
        .catch(err => {});
    },
    // 成功
    success() {
      this.$message({
        message: "恭喜你，瓶子已经成功飘走啦！",
        type: "success"
      });
    },
    // 失败
    fail() {
      this.$message.error("错了哦，瓶子又回来了！");
    }
  }
};
</script>
<style lang="css" scoped>
@import "../../css/piao.css";
</style>